<template>
    <div>
        <div class="crumbs">
           <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
                <el-breadcrumb-item >markdown编辑器</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
       <div class="container">
           <div class="plugins-tips"> 
               mavonEditor：基于Vue的markdown编辑器。
                访问地址：<a href="https://github.com/hinesboy/mavonEditor" target="_blank">mavonEditor</a>
           </div>
            <mavon-editor v-model="content" ref="md" @imgAdd="$imgAdd" @change="change" 
                style="min-height: 600px"
            />

            <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
      
       </div>
    </div>
</template>
<script>
import { mavonEditor } from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
export default {
    data() {
        return {
            content:'', // 输入的markdown
            html:'',    // 及时转的html
            configs: {

            }
        }
    },
     components: {
        mavonEditor,
    },
    methods: {
        $imgAdd(pos, $file){
            var formdata = new FormData();
            formdata.append('file', $file);
            this.$axios({
                url: "/assets/img",
                methods: "post",
                data: formdata,
                headers: { 'Content-Type':'multipart/form-data'},
            }).then( (url) => {
                this.$refs.md.$img2Url(pos,url);
            })
        },
        // 所有操作都会被解析重新渲染
        change(value, render){
            // render 为 markdown 解析后的结果[html]
            this.html = render;
        },
        // 提交
        submit(){
            console.log(this.content);
            console.log(this.html);
            this.$message.success("提交成功");
        }
    },
}
</script>
<style scoped>
.editor-btn {
    margin-top: 20px;
}
</style>

